<template>
  <div>
    <cardTool>
      <template #headerDiy>
        <el-row style="width:100%" type="flex" justify="space-between">
          <span />
          <el-button size="small" type="primary" @click="addPermssion">添加权限</el-button>
        </el-row>
      </template>
      <template #body>
        <el-table
          :header-cell-style="headerCellStyle"
          lazy
          row-key="id"
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="title"
            label="权限名称"
          />
          <el-table-column
            prop="code"
            label="权限标识"
          />
          <el-table-column
            prop="description"
            label="权限描述"
          />
          <el-table-column
            prop="address"
            label="操作"
          >
            <template #default="{row}">
              <el-row>
                <el-button v-show="row.pid==='0'?true:false" size="small" type="primary" @click="addFn(row.id)">添加子权限</el-button>
                <el-button size="small" type="warning" @click="update(row.id)">编辑</el-button>
                <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </cardTool>
    <dailogShow ref="dailogShow" :is-show.sync="isShow" @getList="updateList" />
  </div>
</template>

<script>
import { getPermssion, getPermssionLength, deletePermssion } from '@/api/permssion'
import dailogShow from './components/dailogShow.vue'
import { getArrList } from '@/utils/index'
export default {
  components: {
    dailogShow
  },
  data() {
    return {
      tableData: [],
      limit: 7,
      start: 0,
      total: 0,
      isShow: false,
      formData: {
        title: '',
        code: '',
        description: '',
        pid: '0',
        type: '1'
      },
      totalArr: []
    }
  },
  async created() {
    await this.getPermssionListLength()
    this.getPermssionAllList()
  },
  methods: {
    headerCellStyle() {
      return 'text-align:center'
    },
    // 获取全部权限点
    async getPermssionAllList() {
      const res = await getPermssion({
        _limit: this.total,
        _start: 0
      })
      // console.log(res.data)
      this.tableData = getArrList(res.data, '0')
    },
    // 获取总长度
    async getPermssionListLength() {
      const res = await getPermssionLength()
      this.total = res.data
    },
    // 添加权限
    addPermssion() {
      this.isShow = true
    },
    // 子组件更新组件数据
    async updateList() {
      console.log(1)
      await this.getPermssionListLength()
      this.getPermssionAllList()
    },
    // 删除权限点
    delFn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deletePermssion(id)
        this.getPermssionAllList()
      }).catch(() => {

      })
    },
    // 更新编辑权限点
    async update(id) {
      this.$refs.dailogShow.formData.id = id
      await this.$refs.dailogShow.getOncePermssions(id)
      this.isShow = true
    },
    // 添加子权限
    addFn(id) {
      this.$refs.dailogShow.formData.type = '2'
      console.log(this.$refs.dailogShow.formData.type)
      this.$refs.dailogShow.formData.pid = `${id}`
      this.isShow = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
